Incluso al hacer clic en el botón, la variable sum cambia a 29.98 , pero aunque estoy usando useEffect hook, y he agregado dependencia como [sum] , de modo que si el valor de num cambia let sum = 0 , cuando hago clic en el botón, y sum ahora se convierte en 29.98, por lo que debería volver a procesarse y ahora debería ver el valor actualizado en la interfaz de usuario, pero aún muestra 0, creo que el componente no se vuelve a procesar. ¿Por qué?
import React, { useEffect } from 'react'; import './SelectEx1.css' const SelectEx1 = (props) => { let data = [ { id: 1, title: "Milk", price: 15.99, }, { id: 2, title: "Bread", price: 13.99, }, ]; let sum = 0; useEffect(()=>{}, [sum]); const handleClick = () => { console.log(data); data.map((item) => { sum = (sum + item.price) }); } return ( <div> <p>hello, {sum}</p> <button onClick={handleClick}>click-me</button> </div> ) } export default SelectEx1;Creo que lo que quieres es
const [sum, setSum] = useState(0); ... const handleClick = () => { console.log(data); const total = data.reduce((a, b) => a + b, 0); setSum(total); } De modo que handleClick desencadenará un cambio de estado, lo que activa la reproducción. Poner sum en la lista de dependencias de useEffect simplemente activa la función (primer parámetro) en useEffect cuando se cambia sum . Dado que el primer parámetro es una función vacía, no hace nada cuando se cambia la sum .
En lugar de definir sum como variable, hágalo indicar. Porque las actualizaciones de estado desencadenan re-renderizaciones. Y llame a setSum dentro de la función handleClick para cambiar el valor de la sum de estado, lo que hará que se vuelva a procesar y podrá ver el valor actualizado en la interfaz de usuario:
import React, { useEffect } from 'react'; import './SelectEx1.css' const data = [ { id: 1, title: "Milk", price: 15.99, }, { id: 2, title: "Bread", price: 13.99, }, ]; const SelectEx1 = (props) => { const [sum, setSum] = React.useState(0) const handleClick = () => { const total = data?.reduce(function (previousValue, currentValue) { return previousValue + currentValue.price }, 0) setSum(total) } return ( <div> <p>hello, {sum}</p> <button onClick={handleClick}>click-me</button> </div> ) } export default SelectEx1;No necesita useEffect , ponga sum en useState y cambie onClick como se muestra a continuación:
const [sum,setSum] = useState(0); const handleClick = () => { const reducer = (previousValue, currentValue) => previousValue + currentValue.price; setSum(data.reduce(reducer,0)) }